<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<table id="user_table">
    <thead>
    <th data-options="field:'id'">ID</th>
    <th data-options="field:'realName'">真实姓名</th>
    <th data-options="field:'email'">邮箱</th>
    </thead>
</table>
<div id="user-tool">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="doUserAdd()">添加</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="doUserUpdate()">修改</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"
       onclick="doRoleAssign()">分配角色</a>
</div>

<div id="user-role-dialog" class="easyui-dialog" title="分配角色" style="width:400px;height: 300px" closed="true"
     modal="true" data-options="footer:'#user-role-buttons'">
    <ul id="user-role-tree" class="easyui-tree"></ul>
</div>
<div id="user-role-buttons" style="padding:5px 15px 5px 0px;text-align: right">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="submitUserRole()">提交</a>
    <a href="#" class="easyui-linkbutton" onclick="$('#user-role-dialog').dialog('close')">取消</a>
</div>
<script type="text/javascript">
    $(function () {
        $("#user_table").datagrid({
            url: "<%=request.getContextPath()%>/user.html?act=list",
            singleSelect: true,
            toolbar: "#user-tool"
        });
    });

    function doRoleAssign() {
        var row = $("#user_table").datagrid("getSelected");
        if (row == null || row.length == 0) {
            return;
        }
        $.ajax({
            url: "<%=request.getContextPath()%>/user.html?act=user_role",
            data: "userId=" + row.id,
            success: function (roleIds) {
                $("#user-role-tree").tree({
                    url: "<%=request.getContextPath()%>/user.html?act=role_list",
                    method: "post",
                    checkbox: true,
                    formatter: function (node) {
                        return node.remark + "[" + node.name + "]"
                    },
                    onLoadSuccess: function (node, data) {
                        for (var i = 0; i < roleIds.length; i++) {
                            var nodeMenu = $("#user-role-tree").tree("find", roleIds[i]);
                            $("#user-role-tree").tree("check", nodeMenu.target);
                        }
                        $("#user-role-dialog").dialog("open")
                    }
                });
            }
        })
    }

    function submitUserRole() {
        var row = $("#user_table").datagrid("getSelected");
        var roleIds = new Array();
        $($("#user-role-tree").tree("getChecked")).each(function (i, node) {
            roleIds[i] = node["id"];
        });
        $.ajax({
            url: "<%=request.getContextPath()%>/user.html?act=assign_role",
            data: {userId: row["id"], roleIds: roleIds.join(",")},
            method: "post",
            success: function (data) {
                if (data.status) {
                    $("#user-role-dialog").dialog("close");
                } else {
                    alert(data.message);
                }
            }
        })
    }
</script>